package com.hippo.core.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.hippo.core.core.ext.click


@Composable
fun OutlineOptionButton(
    text: String,
    normalImage: Painter,
    checkedImage: Painter,
    checked: Boolean = false,
    iconSize: Dp = 84.dp,
    modifier: Modifier = Modifier,
    onClick: (() -> Unit)
) {

    val textColor = if (checked) MaterialTheme.colorScheme.primary else Color.Gray

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .border(
                width = 1.dp,
                color = if (checked) MaterialTheme.colorScheme.primary else Color.Gray,
                shape = RoundedCornerShape(12.dp)
            )
            .background(
                color = if (checked) MaterialTheme.colorScheme.primary.copy(alpha = 0.1f) else Color(
                    0xEFEFEF
                ),
                shape = RoundedCornerShape(12.dp)
            )
            .padding(vertical = 30.dp)
            .click { onClick() }
    ) {

        Image(
            modifier = Modifier
                .size(iconSize),
            painter = if (checked) checkedImage else normalImage,
            contentDescription = null,
        )

        Text(
            text = text,
            color = textColor
        )
    }


}